<template>
  <section class="house-use">
    <DivShell title="房屋使用情况">
      <div class="container">
        <div class="house-use-percent">
          <p>房屋状态占比</p>
          <div>
            <template v-for="(item,index) in HouseTypeList" >
              <div :key="index" :style="`width:${(item.value/houseTotal)*100}%;background:${item.color};`"></div>
            </template>
          </div>
          <ul>
            <li v-for="(item,index) in HouseTypeList" :key="index">
              <p>
                <i :style="`background:${item.color}`"></i>
                <label>{{item.label}}</label>
              </p>
              <span :style="`color:${item.color}`">{{Math.round((item.value/houseTotal)*100)}}%</span>
            </li>
          </ul>
        </div>
      </div>
    </DivShell>
  </section>
</template>

<script>
import DivShell from '@src/components/5670/divShell.vue'
export default {
  name: "HouseUse",
  components:{
    DivShell
  },
  props: {
    title:{
      type: String,
      default:'丰图精准决策数字底板'
    }
  },
  data() {
    return {
      color:['#307FFF','#4AEBE2','#864AEB','#EB7D4A','#FFC700','#FFFFFF'],
      houseTotal:187346,
      HouseTypeList:[
        {
          label:'自用',
          value:154548,
          color:'#307FFF'
        },
        {
          label:'出租',
          value:54678,
          color:'#4AEBE2'
        },
        {
          label:'空置',
          value:34486,
          color:'#864AEB'
        },
        {
          label:'待租',
          value:14548,
          color:'#EB7D4A'
        },
        {
          label:'部分出租',
          value:4048,
          color:'#FFC700'
        },
        {
          label:'其它',
          value:4548,
          color:'#FFFFFF'
        },
      ]
    };
  },
  mounted() {
     
  },
  methods: {
    
  },
  beforeDestroy() {
      
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  .house-use{
    display: flex;
    margin-bottom: 20px;
    & .container{
      .house-use-percent{
        padding-left: 20px;
        box-sizing: border-box;
        width: 100%;
        &>p{
          font-size: 42px;
          color: #959DB4;
          margin-bottom: 10px;
        }
        &>div{
          width: 100%;
          height: 10px;
          background-color: #283864;
          display: flex;
          margin-bottom: 50px;
        }
        &>ul{
          display: flex;
          flex-wrap: wrap;
          &>li{
            width: 40%;
            margin-right: 20%;
            display: flex;
            justify-content: space-between;
            height: 100px;
            line-height: 100px;
            &:nth-of-type(even){
              margin-right: 0;
            }
            &>p{
              display: flex;
              align-items: center;
              font-size: 42px;
              color: #707DA4;
              &>i{
                width: 18px;
                height: 18px;
                border-radius: 50%;
                margin-right: 50px;
              }
            }
            &>span{
              font-size: 52px;
              color: #307FFF;
            }
          }
        }
      }
    }
  }
</style>
